<form class="layui-form seller-form"  action="" >

    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">学院：</label>
            <div class="layui-input-inline">
                <input type="text" id="collegeName" name="collegeName" lay-verify="title" placeholder="请输入学院名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">宿舍楼：</label>
            <div class="layui-input-inline">
                <input type="text" id="dormName" name="dormName" lay-verify="title" placeholder="请输入宿舍楼名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">辅导员：</label>
            <div class="layui-input-inline">
                <input type="text" id="teacherName" name="teacherName" lay-verify="title" placeholder="请输入辅导员姓名" autocomplete="off" class="layui-input">
            </div>
        </div> 

        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">学生学号：</label>
            <div class="layui-input-inline">
                <input type="text" id="xh" name="xh" lay-verify="title" placeholder="请输入学生学号" autocomplete="off" class="layui-input">
            </div>
        </div> 

        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">学生姓名：</label>
            <div class="layui-input-inline">
                <input type="text" id="xm" name="xm" lay-verify="title" placeholder="请输入学生姓名" autocomplete="off" class="layui-input">
            </div>
        </div> 
    </div>

    <div class="layui-form-item">
 
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2" >时间范围：</label>
            <div class="layui-input-inline" >
                <input  type="text" name="date" value="" id="date" placeholder="请输入起止时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="">
                <button class="layui-btn layui-btn-sm"  val="" lay-submit lay-filter="*"><i class="iconfont icon-chaxun"></i>确定</button>

                <button class="layui-btn layui-btn-primary layui-btn-sm"  val="1" lay-submit lay-filter="*">今日</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm"  val="2" lay-submit lay-filter="*">昨日</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm"  val="7" lay-submit lay-filter="*">7日内</button>
                <button type="button" id="exportBtn" class="layui-btn layui-btn-sm layui-btn-disabled"  lay-submit lay-filter="exportDetail" disabled><i class="iconfont icon-clouddownload" style="font-size: 20px !important;"></i>导出</button>
            </div>
        </div>

    </div>
</form>

<div class="table-body">
    <table id="dormDetailTable" lay-filter="dormDetailTable"></table>
</div>

<div id="exportDetail" style="display: none;">
    <form class="layui-form export-form"  action="" >
        <div class="layui-form-item">
            <div class="layui-margin-10">
                <blockquote class="layui-elem-quote layui-text">
                    请先选中或筛选要导出的数据
                </blockquote>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">任务名称：</label>
                <input type="text" name="taskname" lay-verify="title" style="width:200px;" placeholder="请输入任务名称" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['table','form','layer','laydate'],function(){
        var layer = layui.layer, table = layui.table,form = layui.form,date = layui.laydate;
        // 定义变量保存当前页面和当前页面数据条数
        var currPage; 
        var dataNum;

        var preDate = layui.util.toDateString(new Date(), "yyyy-MM-dd");

        //时间插件
        layui.laydate.render({
            elem: '#date',
            range: '到',
            type: 'date',
            max: preDate,
            value: "{:date('Y-m-d')} 到 {:date('Y-m-d')}"
        });

        //执行渲染
        var statisticsTable = table.render({
            elem: '#dormDetailTable', //指定原始表格元素选择器（推荐id选择器）
            height: 'full-195',
            cellMinWidth: '80',
            page: 'true',
            limit: '20',
            id:'dormDetailTable',
            url: "{:url('Apartment/apartmentDetail')}",
            cols: [[ //标题栏
                {type:'numbers'},
                {field: 'id', title: 'ID', hide:true},
                {field: 'collegeName', title: '学院', width:200, align:'center'}, 
                {field: 'dormName', title: '宿舍楼', width:200, align:'center'}, 
                {field: 'teacherName', title: '辅导员', width:120, align:'center'}, 
                {field: 'operator',sort: true, title: '发放人' ,align:'center', width: 200},
                {field: 'XH',sort: true, title: '学号' ,align:'center', width: 120},
                {field: 'XM',sort: true, title: '姓名' ,align:'center', width: 120},
                {field: 'lqsj',sort: true, title: '发放时间' ,align:'center', width: 200},
                { width: 80, title: '操作', align: 'center', toolbar: '#hooksBar' }
            ]], //设置表头
            done: function(res, curr, count){
                // 给变量赋值 
                dataNum = res.data.length;
                currPage = curr;
            }
        });
 
        form.on('submit(*)', function(data){
            type = data.elem.getAttribute('val');
            if(type != ""){
                getTime(type,function(){
                    order_balance();
                });
            }else{
                if($('#date').val() == '') {
                    layer.msg('【时间范围】不能为空', {time: 1300});
                    return false;
                }
                order_balance();
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //监听工具条
        table.on('tool(dormDetailTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            
            if(layEvent === 'del'){ // 删除
                $("a[name='del']").addClass("layui-btn-disabled");
                $("a[name='del']").attr("disabled", true);

                layer.confirm('您确定删除此条发放记录吗？', {
                    btn: ['确认', '取消'], //按钮
                    cancel:function(index, layero){
                        $("a[name='del']").removeClass("layui-btn-disabled");
                        $("a[name='del']").removeAttr("disabled");
                    }
                }, function () {
                    JsPost("{:url('Apartment/apartmentDetailDel')}", {id:data.id}, function (res) {
                        $("a[name='del']").removeClass("layui-btn-disabled");
                        $("a[name='del']").removeAttr("disabled");
                        
                        //删除逻辑中判断只有一条数据时应该刷新前一页信息
                        layer.msg(res.msg);
                        if(res.status){
                            if(dataNum == 1){
                                currPage = currPage - 1;
                            }

                            table.reload('dormDetailTable', {
                                page: {
                                    curr: currPage
                                }
                            });
                            return false;
                        }
                    });
                }, function () {
                    $("a[name='del']").removeClass("layui-btn-disabled");
                    $("a[name='del']").removeAttr("disabled");
                    layer.close(1);
                });
            }
        });

        //取值
        function order_balance(){
            var date = '';
            if($('#date').val() == '') {
                var preDate = layui.util.toDateString(new Date(), "yyyy-MM-dd");
                date = preDate + " 到 " + preDate;
            } else {
                date = $('#date').val();
            }
            
            var where = {
                collegeName: $('#collegeName').val(),
                dormName: $('#dormName').val(),
                teacherName: $('#teacherName').val(),
                xh: $('#xh').val(),
                xm: $('#xm').val(),
                date: date
            };

            layui.table.reload('dormDetailTable', {
                where: where,
                done: function(res, curr, count){
                    // 判断加载结果数量是否大于0
                    if(count>0){
                        $("#exportBtn").removeClass("layui-btn-disabled");
                        $('#exportBtn').removeAttr("disabled");
                    }
                }
            });
        }

        //解析时间按钮
        function getTime(type,calback){
            var data = {
                date_type:type
            };
            JsPost('{:url("Report/getDateType")}', data, function(res){
                if(res.status){
                    //设置时间，回调
                    $('#date').val(res.data.start  + " 到 " + res.data.end);
                    calback();
                }else{
                    layer.msg(res.msg);
                }
            })
        }

        //学院发放进度导出
        layui.form.on('submit(exportDetail)', function(data){
            layer.open({
                type: 1,
                title:'发放明细导出',
                area: ['400px', '248px'], //宽高
                btn:['确定','取消'],
                content: $("#exportDetail").html(),
                success: function () {
                    $(':focus').blur();
                    this.enterEsc = function(event){
                        if(event.keyCode === 13){
                            if(!$(".layui-layer-btn0").hasClass("layui-btn-disabled")){
                            $(".layui-layer-btn0").addClass("layui-btn-disabled");

                            var filter = $(".seller-form").serialize();
                            $(".export-form:last").append("<input type='hidden' name='filter' value='" + filter + "'>");
                            var data = $(".export-form:last").serializeArray();

                            if($.trim(data[0]['value']) == '') {
                                layer.msg('请填写任务名称！', { time: 1300 });
                                $(".layui-layer-btn0").removeClass("layui-btn-disabled");
                                return false;
                            }
                            
                            data.push({'name':'model','value':'ApartmentDetail'});

                            JsPost("{:url('Ietask/export')}",data,function(res){
                                    layer.msg(res.msg, {time:1500}, function(){
                                        if(res.status){
                                            layer.closeAll();
                                            //执行跳转
                                            var topLayui = parent === self ? layui : top.layui;
                                            topLayui.index.openTabsPage('/manage/ietask/index.html', '导入导出');
                                        } else { 
                                            $(".layui-layer-btn0").removeClass("layui-btn-disabled");
                                        }
                                    });
                                }
                            );
                        }
                            return false; //阻止系统默认回车事件
                        }
                    };
                    $(document).on('keydown', this.enterEsc);	//监听键盘事件，关闭层
                },
                yes:function () {
                    if(!$(".layui-layer-btn0").hasClass("layui-btn-disabled")){
                        $(".layui-layer-btn0").addClass("layui-btn-disabled");

                        var filter = $(".seller-form").serialize();
                        $(".export-form:last").append("<input type='hidden' name='filter' value='" + filter + "'>");
                        var data = $(".export-form:last").serializeArray();

                        if($.trim(data[0]['value']) == '') {
                            layer.msg('请填写任务名称！', { time: 1300 });
                            $(".layui-layer-btn0").removeClass("layui-btn-disabled");
                            return false;
                        }

                        data.push({'name':'model','value':'ApartmentDetail'});

                        JsPost("{:url('Ietask/export')}",data,function(res){
                                layer.msg(res.msg, {time:1500}, function(){
                                    if(res.status){
                                        layer.closeAll();
                                        //执行跳转
                                        var topLayui = parent === self ? layui : top.layui;
                                        topLayui.index.openTabsPage('/manage/ietask/index.html', '导入导出');
                                    } else { 
                                        $(".layui-layer-btn0").removeClass("layui-btn-disabled");
                                    }
                                });
                            }
                        );
                    }
                },btn2:function () {
                    layer.closeAll();
                }, end: function(){
                    $(document).off('keydown', this.enterEsc);	        //解除键盘关闭事件
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        order_balance();
    })
</script>

<script type="text/html" id="hooksBar">
    <a class="layui-btn layui-btn-xs layui-btn-danger" name="del" lay-event="del">删除</a>
</script>